import React, { FC } from "react";
import { rsaEncrypt, rsaDecrypt } from "../rsa";

export enum Type {
  Encrypt = "Encrypt",
  Decrypt = "Decrypt",
}
interface TProps {
  type: Type;
  publicKey?: string;
  privateKey?: string;
  inputStr: string;
}

const Example: FC<TProps> = ({ publicKey, privateKey, inputStr, type }) => {
  return (
    <div
      style={{
        width: 800,
        margin: "0 auto",
        padding: "20px",
        boxShadow: "0 0 6px 0 rgba(0,0,0,.15)",
      }}
    >
      <div>
        <div style={{ display: "inline-block" }}>
          <div style={{ margin: "0 0 10px 0" }}>公钥</div>
          <div
            style={{
              width: 350,
              height: 150,
              border: "1px solid #f2f2f2",
              wordWrap: " break-word",
              overflowY: "scroll",
            }}
          >
            <div style={{ flexBasis: "350px", wordWrap: "break-word" }}>
              {publicKey}
            </div>
          </div>
        </div>
        <div style={{ display: "inline-block", float: "right" }}>
          <div style={{ margin: "0 0 10px 0" }}>私钥</div>
          <div
            style={{
              width: 350,
              height: 150,
              border: "1px solid #f2f2f2",
              wordWrap: " break-word",
              overflowY: "scroll",
            }}
          >
            {privateKey}
          </div>
        </div>
      </div>
      <div>
        <div style={{ margin: "20px 0 10px 0" }}>
          需要{type == Type.Encrypt ? "解密" : "加密"}的文本:
        </div>
        <div
          style={{
            width: "100%",
            height: 100,
            border: "1px solid #f2f2f2",
            wordWrap: " break-word",
            overflowY: "scroll",
          }}
        >
          {inputStr}
        </div>
      </div>
      <div>
        <div style={{ marginBottom: "10px" }}>输出: </div>
        <div
          style={{
            width: "100%",
            height: 100,
            border: "1px solid #e2e2e2",
            wordWrap: " break-word",
            overflowY: "scroll",
          }}
        >
          {type == Type.Encrypt
            ? rsaEncrypt(inputStr, publicKey)
            : rsaDecrypt(inputStr, privateKey)}
        </div>
      </div>
    </div>
  );
};

export default Example;
